<template>
  <view>
    <!-- 头部导航栏 -->
    <view class="top-navigate bg-yellow" style="padding: 53px 10px 15px 10px;">
      <navigator class="content cuIcon-back text-xl" style="font-weight: 700;" hover-class="none"
        url="../../pages/index/index" open-type="redirect">
      </navigator>
      <view class="text-xl top-navigate-title">认证成功</view>
    </view>
    <view class="logo">
      <view class="shop-icon shop-icon-chenggong" style="height: 50px;width: 50px;"></view>
    </view>
    <view class="message">
      <view class="" style="font-weight: 700;">
        认证成功
      </view>
      <view class="" style="font-size: 14px;margin: 10px 0;">
        您已成功认证成为水院镖局的跑腿骑手，去抢单赚钱吧
      </view>
    </view>

    <button class="cu-btn round bg-blue margin-tb-sm lg btn-rush-order" @click="rushOrder">
      <text class="">去抢单</text>
    </button>
    </button>
  </view>

</template>

<script>
  import {
    mapActions
  } from 'vuex'
  export default {
    name: 'authentication-success',
    data() {
      return {
        runner: {}
      };
    },
    props: ['runnerInfo'],
    created() {
      // this.runner=this.runnerInfo
    },
    methods: {
      ...mapActions('m_runner', ['runnerRegister', 'getRunnerInfo']),
      async rushOrder() {
        //注册认证 生成 id
        const {
          result: res
        } = await this.runnerRegister(this.runnerInfo)
        // console.log(res.id);
        //根据id 查询骑手详情信息
        const result = await this.getRunnerInfo(res.id)
        if (result.data.length > 0) {
          uni.navigateTo({
            url: '/subpkg-runner/runner-person-center/runner-person-center'
          })
        } else {
          uni.$showMsg('认证失败！', warning)
        }
      }
    }
  }
</script>

<style lang="scss">
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: bold;
    }

    .top-navigate-address {
      width: 150px;
      margin: 0 5px;
    }
  }

  .logo {
    margin: 100px 10px auto;
    height: 100px;
    display: flex;
  }

  .message {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: darkgrey;
    justify-content: center;
    align-items: center;
  }

  .btn-rush-order {
    width: 150px;
    margin: 20px auto;
    display: flex;
  }
</style>